<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>导航</title>
        <style>
            #nav{position:relative;}
            ul{list-style:none;padding:0px;}
            #nav li{
                width:200px;height:50px;
                border:1px solid green;
                float:left;
                margin:0px 20px;
                background-color:red;
                border-radius:5px;
            }
            #c1,#c2,#c3,#c4{
                width:925px;
                height:400px;
                border:1px solid red;
                position:absolute;
                left:20px;top:50px;
                display:none;
            }
            #c1{ background-color:deeppink; }
            #c2{ background-color:orangered; }
            #c3{ background-color:gold; }
            #c4{ background-color:greenyellow; }
            
            #b1:hover #c1{display:block;}
            #b2:hover #c2{display:block;}
            #b3:hover #c3{display:block;}
            #b4:hover #c4{display:block;}
        </style>
    </head>
    <body>
        <div id='nav'>
            <ul>
                <li id='b1'>第一页
                    <div id='c1' style='display:block;'></div>
                </li>
                <li id='b2'>第二页
                    <div id='c2'></div>
                </li>
                <li id='b3'>第三页
                    <div id='c3'></div>
                </li>
                <li id='b4'>第四页
                    <div id='c4'></div>
                </li>
            </ul> 
        </div>        
    </body>
</html>